import { FunctionComponent, useMemo, useState } from 'react';
import Styles from './index.module.scss';

interface PMiddleTitleProps { }

const h = 6;

const PMiddleTitle: FunctionComponent<PMiddleTitleProps> = () => {
  const intro = [
    ['一款由普罗维登粉丝制作的同人模组', '我也不知道加什么话了'],
    ['在这里，你可以...', '戴上莉夏Lecia的机械角，召唤雷电。'],
    ['同时你也可以...', '驾驶粉色的妮头车，横冲直撞。'],
    ['模组包含了每一位虚拟主播的相关物品', '灵感来源为对应主播的设定/梗'],
  ];
  const [curIndex, setCurIndex] = useState(0),
    len = intro.length;

  useMemo(() => {
    setTimeout(() => {
      console.log(curIndex);
      if (curIndex < len - 1) setCurIndex(curIndex + 1);
      else setCurIndex(0);
    }, 5250);
  }, [curIndex]);

  return (
    <div className={Styles.p_middle_title}>
      <h3>Providencraft</h3>
      <div className={Styles.container}>
        <div
          className={Styles.wrapper}
          style={{
            transform: `translateY(-${h * curIndex}rem)`,
          }}
        >
          {intro.flat().map((v, k) => (
            <h2 key={k}>{v}</h2>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PMiddleTitle;
